/**
 * 学习目标：使用JSX中的嵌套表达式
 * 作用：和vue的插值表达式类似，可以给标签设置内容
 * 总结
 *
 * 1. undefined、null、布尔值不会在界面中显示
 * 2. 对象在JSX的表达式中，不能直接使用，会报错（不像Vue)
 * 3. 数组可以再JSX表达式中，可以直接使用，会把数组的每项元素，当做一个JSX对象显示
 * 4. JSX本身也可以作为表达式
 *
 * 语句：if语句、for语句都不是表达式，不能在JSX中使用
 */
import React from 'react';
import ReactDOM from 'react-dom';

const isVip = false;

function sayHello() {
  return 'hello React';
}

const spanNode = <span>我是span标签</span>;

const divNode = (
  <>
    <div>
      {isVip ? <h1>欢迎氪金大佬</h1> : ''}
      <h2>{sayHello()}</h2>
      <h3>{spanNode}</h3>
    </div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
